/**
 * React Native 学习演示 - 主入口
 * 
 * 这是一个测试演示场景的列表，用于学习各种 React 和 React Native 特性
 */

import React, { useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  StatusBar,
  useColorScheme,
  ScrollView,
} from 'react-native';
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

// 导入演示组件
import TestReactHook1 from './src/test_react_hook_1';
import {TestModalAnimated} from './src/test_modal_animated';
import {AnimationOrderDemo} from './src/examples/AnimationOrderDemo';
import TestTabPage from './src/test_tab_page';
import {TestFloatingView} from './src/test_floating_view';
import {TestFrameAnimation} from './src/test_frame_animation';
import { TestNewFrameAnimation } from './src/test_new_frame_animation';
import { TestWeChatVoice } from './src/test_wechat_voice';
import { TestWeChatVoiceImage } from './src/test_wechat_voice_image';

// ============================================
// 演示列表配置
// ============================================
interface Demo {
  id: string;
  title: string;
  description: string;
  component: React.ComponentType;
}

const demos: Demo[] = [
  {
    id: 'test_react_hook_1',
    title: 'React Hooks 学习',
    description: '深入学习 useState 和 useReducer，使用聊天消息场景演示',
    component: TestReactHook1,
  },
  {
    id: 'test_modal_animated',
    title: '底部动画模态框',
    description: '从底部弹出的动画模态框组件，支持手势关闭和自定义样式',
    component: TestModalAnimated,
  },
  {
    id: 'animation_order_demo',
    title: '动画顺序演示',
    description: '展示正确和错误的动画顺序，用于理解为什么打开/关闭动画的代码顺序很重要',
    component: AnimationOrderDemo,
  },
  {
    id: 'test_tab_page',
    title: 'TabView 组件演示',
    description: '横向滑动Tab组件，支持顶部/底部标签栏、手势滑动、懒加载、自定义标签等功能',
    component: TestTabPage,
  },
  {
    id: 'test_floating_view',
    title: '悬浮组件演示',
    description: '可拖动的悬浮组件，支持边界检查、自动贴边、点击识别，适用于音视频通话最小化等场景',
    component: TestFloatingView,
  },
  {
    id: 'test_frame_animation',
    title: '帧动画演示',
    description: '帧动画组件，支持平滑过渡、循环播放、命令式控制等特性',
    component: TestFrameAnimation,
  },
  {
    id: 'test_new_frame_animation',
    title: '新帧动画演示',
    description: '新帧动画组件，支持平滑过渡、循环播放、命令式控制等特性',
    component: TestNewFrameAnimation,
  },
  {
    id: 'test_wechat_voice',
    title: '微信语音动画演示 (SVG)',
    description: '微信语音动画组件，使用SVG实现，支持平滑过渡、循环播放、自定义颜色',
    component: TestWeChatVoice,
  },
  {
    id: 'test_wechat_voice_image',
    title: '微信语音动画演示 (PNG)',
    description: '微信语音动画组件，使用PNG图片实现，性能更优，适合生产环境使用',
    component: TestWeChatVoiceImage,
  },
  // 未来可以添加更多演示
  // {
  //   id: 'test_react_hook_2',
  //   title: 'useEffect & useCallback',
  //   description: '学习副作用和性能优化',
  //   component: TestReactHook2,
  // },
];

// ============================================
// 主应用组件
// ============================================
function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <AppContent />
    </SafeAreaProvider>
  );
}

function AppContent() {
  const safeAreaInsets = useSafeAreaInsets();
  const [selectedDemo, setSelectedDemo] = useState<Demo | null>(null);

  // 如果选中了演示，显示演示组件
  if (selectedDemo) {
    const DemoComponent = selectedDemo.component;
    return (
      <View style={styles.demoContainer}>
        {/* 返回按钮 */}
        <View style={[styles.header, { paddingTop: safeAreaInsets.top }]}>
          <TouchableOpacity
            style={styles.backButton}
            onPress={() => setSelectedDemo(null)}
          >
            <Text style={styles.backButtonText}>← 返回</Text>
          </TouchableOpacity>
          <Text style={styles.headerTitle}>{selectedDemo.title}</Text>
        </View>
        
        {/* 演示组件 */}
        <DemoComponent />
      </View>
    );
  }

  // 显示演示列表
  return (
    <View style={[styles.container, { paddingTop: safeAreaInsets.top }]}>
      <View style={styles.listHeader}>
        <Text style={styles.mainTitle}>🎯 React Native 学习演示</Text>
        <Text style={styles.mainSubtitle}>
          选择一个演示开始学习
        </Text>
      </View>

      <ScrollView style={styles.demoList}>
        {demos.map((demo, index) => (
          <TouchableOpacity
            key={demo.id}
            style={styles.demoCard}
            onPress={() => setSelectedDemo(demo)}
            activeOpacity={0.7}
          >
            <View style={styles.demoCardHeader}>
              <Text style={styles.demoNumber}>{index + 1}</Text>
              <Text style={styles.demoTitle}>{demo.title}</Text>
            </View>
            <Text style={styles.demoDescription}>{demo.description}</Text>
            <View style={styles.demoCardFooter}>
              <Text style={styles.demoLink}>点击查看 →</Text>
            </View>
          </TouchableOpacity>
        ))}

        {/* 占位卡片 - 显示即将添加的内容 */}
        <View style={[styles.demoCard, styles.comingSoonCard]}>
          <Text style={styles.comingSoonText}>更多演示即将添加...</Text>
          <Text style={styles.comingSoonHint}>
            可以继续添加 useEffect, useContext, useMemo 等 Hook 的演示
          </Text>
        </View>
      </ScrollView>
    </View>
  );
}

// ============================================
// 样式
// ============================================
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f7fa',
  },
  listHeader: {
    padding: 20,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  mainTitle: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#2c3e50',
    marginBottom: 8,
  },
  mainSubtitle: {
    fontSize: 14,
    color: '#7f8c8d',
  },
  demoList: {
    flex: 1,
    padding: 15,
  },
  demoCard: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 20,
    marginBottom: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 3,
  },
  demoCardHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  demoNumber: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: '#4a90e2',
    color: '#fff',
    textAlign: 'center',
    lineHeight: 32,
    fontSize: 16,
    fontWeight: 'bold',
    marginRight: 12,
  },
  demoTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#2c3e50',
    flex: 1,
  },
  demoDescription: {
    fontSize: 14,
    color: '#7f8c8d',
    lineHeight: 20,
    marginBottom: 12,
  },
  demoCardFooter: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  demoLink: {
    fontSize: 14,
    color: '#4a90e2',
    fontWeight: '600',
  },
  comingSoonCard: {
    backgroundColor: '#f8f9fa',
    borderStyle: 'dashed',
    borderWidth: 2,
    borderColor: '#dee2e6',
  },
  comingSoonText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#adb5bd',
    textAlign: 'center',
    marginBottom: 8,
  },
  comingSoonHint: {
    fontSize: 12,
    color: '#adb5bd',
    textAlign: 'center',
  },
  demoContainer: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 15,
    paddingBottom: 15,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  backButton: {
    paddingVertical: 8,
    paddingRight: 15,
  },
  backButtonText: {
    fontSize: 16,
    color: '#4a90e2',
    fontWeight: '600',
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#2c3e50',
    flex: 1,
  },
});

export default App;
